<template>
	<view class="page_view">
		<view class="top_view flex">
			<view class="top_view_left flex1">
				<view class="top_view_left_left buzhou_active">
					1
				</view>
				<view class="top_view_left_right">
					填写信息
				</view>
			</view>
			<view class="flex1">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/buzhoutiao.png" class="buzhoutiao" mode=""></image>
				<view class="top_view_left malr flex1">
					<view :class="[iskai?'buzhou_active':'','top_view_left_left']">
						2
					</view>
					<view class="top_view_left_right">
						医生开方
					</view>
				</view>
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/imagess/buzhoutiao.png" class="buzhoutiao" mode=""></image>
			</view>
			<view class="top_view_left flex1">
				<view class="top_view_left_left">
					3
				</view>
				<view class="top_view_left_right">
					填写信息
				</view>
			</view>
		</view>
		<view class="desc">
			国家规定处方药需凭方购买，填写信息后医生将为您免费开方
		</view>
		<view class="yyren">
			<view class="yyren_top flex">
				<view class="yyren_top_left">
					<text class="yyren_top_left_xing">*</text>用药人
				</view>
				<view class="yyren_top_right flex1" @click="go_NewDrugUsers">
					新增/修改
					<u-icon name="arrow-right" color="#999999" size="13"></u-icon>
				</view>
			</view>
			<view class="yyren_list" v-if="patient_list.length > 0"> 
				<view class="yyren_list_item" v-for="(item,index) in patient_list">
					<view class="yyren_list_item_top">
						{{item.name}}
					</view>
					<view class="yyren_list_item_bottom">
						{{item.sex}} | {{item.age}}
					</view>
				</view>
			</view>
		</view>
		<view class="card_1">
			<view class="yyren_top_left card_1_top flex1">
				<text class="yyren_top_left_xing">*</text>请选择线下已确诊疾病
			</view>
			<view class="card_1_bottom">
				<view class="card_1_bottom_desc">
					感康 复方氨酚烷胺片 <text class="card_1_bottom_desc_xiao">/8粒*2板</text>
				</view>
				<view class="card_1_list flex1">
					<view :class="['card_1_list_item',item.active?'active':'']" v-for="(item,index) in list" @click="choose_label(index)">
						流行性感冒
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom_top flex">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/imagess/no_active.png" class="bottom_top_img" mode=""></image>
				<view class="bottom_top_right">
					确认已在线下就诊，使用过所购买药品且无过敏不良反应，当前病情稳定，我已阅读并同意<text style="color: #E5432E;">《物联网诊疗风险告知及知情同意书》</text>
				</view>
			</view>
			<view class="btn">
				免费问诊开方
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iskai:false,
				patient_list:[],
				list:[
					{
						active:false
					},
					{
						active:false
					},
					{
						active:false
					},
					{
						active:false
					},
					{
						active:false
					}
				]
			}
		},
		methods: {
			choose_label(index){
				this.$set(this.list[index],'active',!this.list[index].active)
			},
			go_NewDrugUsers(){
				uni.navigateTo({
					url:'/pages/NewDrugUsers/NewDrugUsers'
				})
			}
		}
	}
</script>

<style>
page{
	background: #F4F4F4;
}
.page_view{
	padding: 0 30rpx;
	box-sizing: border-box
}
.top_view{
	width: 100%;
	border-radius: 20rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #FFF;
	height: 96rpx;
}
.top_view_left_left{
	width: 28rpx;
	height: 28rpx;
	background: #ccc;
	border-radius: 50%;
	line-height: 28rpx;
	text-align: center;
	font-size: 20rpx;
	font-weight: 400;
	color: #fff;
}
.top_view_left_right{
	margin-left: 8rpx;
	color: #333;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 400;
}
.buzhoutiao{
	width: 84rpx;
	height: 4rpx;
}
.malr{
	margin: 0 10rpx;
}
.buzhou_active{
	background: #0165FB;
}
.desc{
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	margin-top: 30rpx;
}
.yyren{
	width: 100%;
	/* height: 220rpx; */
	border-radius: 20rpx;
	background: #FFF;
	margin-top: 20rpx;
	padding: 30rpx; 
	box-sizing: border-box;
}
.yyren_top_left_xing{
	color: #E5432E;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-weight: 700;
}
.yyren_top_left{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-weight: 700;
}
.yyren_top_right{
	color: #999;
	text-align: right;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	line-height: 28rpx;
}
.yyren_list{
	flex-wrap: wrap;
}
.yyren_list_item{
	display: inline-flex;
	padding: 12rpx 60rpx 12rpx 20rpx;
	flex-direction: column;
	align-items: flex-start;
	border-radius: 8rpx;
	border: 1px solid #E5432E;
	background: rgba(229, 67, 46, 0.06);
	margin-top: 20rpx;
	margin-right: 20rpx;
}
.yyren_list_item_top{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
.yyren_list_item_bottom{
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 20rpx;
	font-weight: 400;
}
.card_1{
	width:100%;
	background-color: #fff;
	border-radius: 20rpx;
	margin-top: 20rpx;
}
.card_1_top{
	height: 104rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #F4F4F4;
}
.card_1_bottom_desc{
	color: #333;
	text-overflow: ellipsis;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
.card_1_bottom{
	padding: 30rpx;
	box-sizing: border-box;
}
.card_1_bottom_desc_xiao{
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
}
.card_1_list{
	flex-wrap: wrap;
}
.card_1_list_item{
	display: flex;
	padding: 20rpx;
	justify-content: center;
	align-items: center;
	gap: 20rpx;
	border-radius: 88rpx;
	background: #EEE;
	color: #666;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 22rpx;
	font-weight: 400;
	margin-top: 20rpx;
	margin-right: 20rpx;
}
.active{
	background:#0165FB;
	color: #FFF;
}
.bottom{
	height: 256rpx;
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
}
.bottom_top_img{
	width: 28rpx;
	height: 28rpx;
	margin-right: 4rpx;
}
.bottom_top_right{
	width: calc(100% - 40rpx);
	color: #666;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 22rpx;
	font-weight: 400;
}
.btn{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #FFF;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 30rpx;
	font-weight: 400;
	border-radius: 68rpx;
	background: var(--, #0165FB);
	margin-top: 24rpx;
}
</style>

